<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>五子棋</title>
    <style>
      body {
        margin: 0;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
      }
      #gameCanvas {
        background-color: #f3d2b5;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
      }
      #info {
        margin-top: 20px;
        font-size: 20px;
        text-align: center;
        min-height: 1.5em; /* 保持高度稳定 */
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <div id="info">黑棋先行</div>

    <script>
      const canvas = document.getElementById('gameCanvas')
      const ctx = canvas.getContext('2d')
      const infoDiv = document.getElementById('info')

      const GRID_SIZE = 25 // 棋盘格子大小
      const BOARD_SIZE = canvas.width / GRID_SIZE // 棋盘格子数 (16x16 grid for 400x400 canvas with 25 spacing)

      let board = Array(Math.floor(BOARD_SIZE))
        .fill()
        .map(() => Array(Math.floor(BOARD_SIZE)).fill(0)) // 0: empty, 1: black, 2: white
      let currentPlayer = 1 // 1 for black, 2 for white
      let gameActive = true

      // 绘制棋盘
      function drawBoard() {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        ctx.strokeStyle = '#000'
        ctx.lineWidth = 1

        // Draw vertical lines
        for (let i = 0; i < BOARD_SIZE; i++) {
          const coord = Math.round(i * GRID_SIZE)
          ctx.beginPath()
          ctx.moveTo(coord, 0)
          ctx.lineTo(coord, canvas.height)
          ctx.stroke()
        }

        // Draw horizontal lines
        for (let j = 0; j < BOARD_SIZE; j++) {
          const coord = Math.round(j * GRID_SIZE)
          ctx.beginPath()
          ctx.moveTo(0, coord)
          ctx.lineTo(canvas.width, coord)
          ctx.stroke()
        }
      }

      // 绘制棋子
      function drawChess(x, y, color) {
        const centerX = Math.round(x * GRID_SIZE)
        const centerY = Math.round(y * GRID_SIZE)
        const radius = GRID_SIZE / 2 - 2 // 留一点边距

        ctx.beginPath()
        ctx.arc(centerX, centerY, radius, 0, Math.PI * 2)
        ctx.fillStyle = color
        ctx.fill()
        ctx.strokeStyle = '#000'
        ctx.stroke()
      }

      // 检查胜利
      function checkWin(x, y, player) {
        const directions = [
          { dx: 1, dy: 0 }, // 水平
          { dx: 0, dy: 1 }, // 垂直
          { dx: 1, dy: 1 }, // 主对角线
          { dx: 1, dy: -1 } // 副对角线
        ]

        for (const dir of directions) {
          let count = 1 // 包含当前落子

          // 向一个方向检查
          for (let i = 1; i < 5; i++) {
            const newX = x + dir.dx * i
            const newY = y + dir.dy * i
            if (newX >= 0 && newX < BOARD_SIZE && newY >= 0 && newY < BOARD_SIZE && board[newY][newX] === player) {
              count++
            } else {
              break
            }
          }

          // 向相反方向检查
          for (let i = 1; i < 5; i++) {
            const newX = x - dir.dx * i
            const newY = y - dir.dy * i
            if (newX >= 0 && newX < BOARD_SIZE && newY >= 0 && newY < BOARD_SIZE && board[newY][newX] === player) {
              count++
            } else {
              break
            }
          }

          if (count >= 5) {
            return true
          }
        }
        return false
      }

      // 处理点击事件
      canvas.addEventListener('click', function (event) {
        if (!gameActive) return

        const rect = canvas.getBoundingClientRect()
        const x = event.clientX - rect.left
        const y = event.clientY - rect.top

        // 计算最近的网格交点
        const gridX = Math.round(x / GRID_SIZE)
        const gridY = Math.round(y / GRID_SIZE)

        // 检查位置是否在画布范围内
        if (gridX >= 0 && gridX < BOARD_SIZE && gridY >= 0 && gridY < BOARD_SIZE) {
          // 检查位置是否为空
          if (board[gridY][gridX] === 0) {
            board[gridY][gridX] = currentPlayer
            drawChess(gridX, gridY, currentPlayer === 1 ? 'black' : 'white')

            if (checkWin(gridX, gridY, currentPlayer)) {
              gameActive = false
              infoDiv.textContent = (currentPlayer === 1 ? '黑棋' : '白棋') + '获胜！'
            } else {
              // 切换玩家
              currentPlayer = currentPlayer === 1 ? 2 : 1
              infoDiv.textContent = (currentPlayer === 1 ? '黑棋' : '白棋') + '落子'
            }
          }
        }
      })

      // 初始化游戏
      drawBoard()
    </script>
  </body>
</html>
